import React from 'react';
import { withRouter } from 'react-router-dom';
import { Steps, Descriptions, Button, Space } from 'antd';
const { Step } = Steps;
class approveDetail extends React.Component {
  constructor() {
    super();
    this.state = {
      current: 0, //当前在哪一步
      status: 'error', //当前步的状态
    };
  }
  //审批同意
  handleAgree = val => {
    const { current } = this.state;
    let num;
    if (current !== 2) {
      num = current + 1;
      this.setState({
        current: num,
      });
    } else {
      num = 2;
      this.setState({
        current: num,
        status: 'finish',
      });
    }
  };
  //审批拒绝
  handleRefuse = val => {
    this.setState({
      current: 0,
      status: 'error',
    });
  };
  render() {
    console.log(this.props.location.state);
    let { current, status } = this.state;
    return (
      <>
        <div className="topSelect">
          <Steps current={current} status={status}>
            <Step title="领导审批" />
            <Step title="财务审批" />
            <Step title="经理审批" />
          </Steps>
        </div>
        <div style={{ marginTop: 50 }}>
          <Descriptions
            bordered
            layout="vertical"
            column={{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }}
          >
            <Descriptions.Item label="申请日期">申请日期</Descriptions.Item>
            <Descriptions.Item label="付款日期">付款日期</Descriptions.Item>
            <Descriptions.Item label="用款事由">用款事由</Descriptions.Item>
            <Descriptions.Item label="审批金额">审批金额</Descriptions.Item>
            <Descriptions.Item label="款项类别">款项类别</Descriptions.Item>
            <Descriptions.Item label="收款单位名称">收款单位名称</Descriptions.Item>
            <Descriptions.Item label="收款单位银行账号">收款单位银行账号</Descriptions.Item>
            <Descriptions.Item label="收款单位开户银行">收款单位开户银行</Descriptions.Item>
            <Descriptions.Item label="分管领导">分管领导</Descriptions.Item>
            <Descriptions.Item label="财务经理">财务经理</Descriptions.Item>
            <Descriptions.Item label="总经理">总经理</Descriptions.Item>
            <Descriptions.Item label="出纳">出纳</Descriptions.Item>
            <Descriptions.Item label="申请人">申请人</Descriptions.Item>
          </Descriptions>
        </div>
        <div style={{ textAlign: 'center', marginTop: 50 }}>
          <Space>
            <Button type="primary" onClick={this.handleAgree}>
              同意
            </Button>
            <Button type="default" onClick={this.handleRefuse}>
              拒绝
            </Button>
          </Space>
        </div>
      </>
    );
  }
}
export default withRouter(approveDetail);
